<template>
  <!-- 头部标签 -->
  <div class="header">
    <img src="@/assets/img/logo.png" />
    <div class="header-right">
      <span>{{ username }}({{ type == 1 ? "超级管理员" : "普通管理员" }})</span>
      <img class="header-img" src="@/assets/img/gita.gif" /> |
      <a href="#" @click="LogoutAction">退出登录</a>
      <img src="@/assets/img/cn.png" />
    </div>
  </div>
</template>

<script>
//引入动作的辅助函数
import { mapGetters, mapActions } from "vuex";
export default {
  name: "Myheader",
  methods: {
    ...mapActions(["LogoutAction"]),
  },
  computed: {
    ...mapGetters(["sidebar", "username", "type"]),
  },
};
</script>

<style scoped lang="less">
.header {
  height: 50px;
  background: #fff;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.header img {
  height: 100%;
}
.header-right {
  display: flex;
  align-items: center;
  a {
    color: #409eff;
    text-decoration: underline;
    cursor: pointer;
  }
}
.header-right .header-img {
  width: 30px;
  height: 30px;
  margin: 0 8px;
}
.header-right a {
  padding-left: 8px;
}
</style>
